<template>
    <div>
        <div class="checkTime">
            <el-select size="mini" v-model="role" placeholder="">
                <el-option label="全部" value="">全部</el-option>
                <el-option label="员工" value="员工"></el-option>
                <el-option label="客户" value="客户"></el-option>
            </el-select>
            <el-date-picker
            v-model="start"
            type="date"
            size="mini"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期">
            </el-date-picker>
            <el-date-picker
            v-model="end"
            type="date"
            size="mini"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期">
            </el-date-picker>
            <el-button type="primary" @click="queryone" size="mini">搜索</el-button>
        </div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            prop="created"
            label="时间"
            width="180">
            </el-table-column>
            <el-table-column
            prop="username"
            label="登录人">
            </el-table-column>
            <el-table-column
            prop="role"
            label="角色">
            </el-table-column>
            <el-table-column
            prop="ip"
            label="登录IP">
            </el-table-column>
            <el-table-column
            prop="verb"
            label="行为日志">
            </el-table-column>
        </el-table>
        <el-pagination
        class="paganitionRight"
        :current-page.sync="curIndex" 
        :page-size="10"
        :pager-count="9"
        @current-change="handleSizeChange"
        layout="total, prev, pager, next"
        :total="totalCount">
        </el-pagination>
    </div>
</template>
<script>
export default {
    name: 'logManagement',
    data () {
        return {
            tableData: [],
            totalCount: 0, // 总数据条数
            curIndex: 1, // 当前页面
            id: '',
            state: '',
            start:'',
            end:'',
            tempend:'',
            role:''
        }
    },
    mounted () {
        this.$axios.get(`/api/action/`)
        .then(res => {
            if(res.status === 200 && res.data.results.length >0){
                this.tableData = res.data.results;
                this.totalCount = res.data.count;

            }
        })
    },
    methods:{
        queryLog(){
            this.$axios.get(`/api/action/`, 
                {
                    params:{
                        start: this.start,
                        end: this.end,
                        role: this.role,
                        page: this.curIndex
                }
            })
            .then(res => {
                if(res.status === 200 && res.data.results.length >0){
                    this.tableData = res.data.results;
                    this.totalCount = res.data.count;
                }
                console.log(res);
            })
        },
        handleSizeChange(page){
            this.curIndex = page;
            this.queryLog();
        },
        queryone(){
            this.curIndex = 1;
            this.queryLog();
        }
    }
}
</script>
<style lang="scss" scoped>
.checkTime {
    float: right;
    margin-bottom: 15px;
    margin-right: 50px;
}
</style>

